<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="./weiqi.css">
  <script src="./weiqi.js"></script>
  <script src="https://cdn.bootcss.com/socket.io/2.3.0/socket.io.dev.js"></script>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>
</head>
<style type="text/css">
  #dom {
    width: 600px;
    height: 600px;
  }
</style>

<body>
  <table>
    <tr>
      <td>
        <div id="type"></div>
        <div>
          <span id="status">未准备</span>
          <button id="ready">准备</button>
        </div>
        <div id="dom"></div>
      </td>
    </tr>
  </table>

<script type="text/javascript">
  // 1. 与服务器端建立连接
  var socket = io.connect(window.location.origin);
  var weiqi = new WeiQi(dom);
  var type = getQueryString('type'); //执子颜色
  var roomid = getQueryString('roomid');

  showColor(type);

  function showColor(type) {
    var colorMap = {
      H: '黑',
      B: '白'
    }
    $("#type").html(colorMap[type]);
  }

  $("#ready").click(function() {
    $.ajax({
      url: '/room/ready',
      data: {
        type: type,
        roomid: roomid
      },
      success: function(res) {
        console.log(res);
      }
    })
  });

  var STATUS_READY = 'ready';

  $.ajax({
    url: '/room/getRoomById',
    data: {
      roomid: roomid
    },
    success: function(res) {
      var roomInfo = res.data;
      if (type == 'H' && roomInfo.colorHStatus == STATUS_READY) {
        $("#status").html('已准备');
      }
      if (type == 'B' && roomInfo.colorBStatus == STATUS_READY) {
        $("#status").html('已准备');
      }
      if (roomInfo.colorHStatus == STATUS_READY && roomInfo.colorBStatus == STATUS_READY) {
        $("#status").html('已开始');
      }
    }
  });

  $.ajax({
    url: '/room/getSteps',
    data: {
      roomid: roomid
    },
    success: function(res) {
      if (res.code == 2) {
        window.location.href = '/login.html';
      }
      
      res.data.forEach(function(step) {
        weiqi.readStep(step.x, step.y, step.type);
      });
    }
  });

  function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", 'i'); // 匹配目标参数
    var result = window.location.search.substr(1).match(reg); // 对querystring匹配目标参数
    if (result != null) {
      return decodeURIComponent(result[2]);
    } else {
      return null;
    }
  }


weiqi.setMusic({
  go: "/video/go.wav",
  eat: "/video/eat.wav"
});


weiqi.onPut(function(chessman) {
  chessman.type = type;
  socket.emit("sentToServer", chessman);
  $.ajax({
    url: '/room/addStep',
    data: {
      x: chessman.x,
      y: chessman.y,
      type: chessman.type,
      roomid: roomid
    },
    success: function(res) {
      console.log(res);
    }
  })
});

weiqi.onError(function(e) {
  console.log(e);
});

socket.on("sendToClient", msg => {
  if (type != msg.type) {
    weiqi.readStep(msg.x, msg.y, msg.type);
  }
  console.log(msg);
});
</script>
</body>
</html>